
let options = {}
let count = 0
let body;
let dom;
let guideDiv;
let maskDiv;
let tooltipDiv;
let tooltipContent;
let arrowBox;
let prev;
let next;
let tooltipClose;
let tooltipText;
class animatedSteering{
	setOptions(e){
		options = e
	}
	start(){
		if(!options.steps[count].element){
			body = document.getElementsByTagName("body")[0]
			// 遮罩层
			let tooltipBox = document.createElement("div")
			tooltipBox.className = "tooltipBox"
			body.appendChild(tooltipBox)
			tooltipBox.innerHTML = "<div class='tooltipContent'>"
				+"<div class='arrowBox'></div>"
				+"<div class='tooltipHeader'><span id='tooltipClose'>x</span></div>"
				+"<div class='tooltipText'>"+options.steps[count].text+"</div>"
				+"<div class='tooltipFooter'><span id='guideStart'>开始</span></div>"
			+"</div>"
			tooltipBox.style.left = document.body.offsetWidth - (tooltipBox.offsetWidth / 2) + "px"
			tooltipBox.style.top = document.body.offsetHeight - (tooltipBox.offsetHeight / 2) + "px"
			let guideMask = document.createElement("div")
			guideMask.className = "guideMask"
			guideMask.style.opacity = "0.7"
			guideMask.style.background = "rgb(33 33 33 / 80%)"
			body.appendChild(guideMask)
			// 开始
			let guideStart = document.getElementById("guideStart")
			guideStart.onclick = function(){
				tooltipBox.remove()
				guideMask.remove()
				this.guide()
			}
			document.getElementById("tooltipClose").onclick = function(){
				tooltipBox.remove()
				guideMask.remove()
			}
		}else{
			this.guide()
		}
	}
	guide(){
		let _this = this
		body = document.getElementsByTagName("body")[0]
		dom = document.querySelector(options.steps[count].element)
		// 引导框
		guideDiv = document.createElement("div")
		guideDiv.className = "guideBox"
		guideDiv.style.position = "fixed"
		guideDiv.style.boxShadow = "rgb(33 33 33 / 80%) 0px 0px 1px 2px, rgb(33 33 33 / 80%) 0px 0px 0px 5000px"
		guideDiv.style.width = dom.offsetWidth + "px"
		guideDiv.style.height = dom.offsetHeight + "px"
		guideDiv.style.top = dom.getBoundingClientRect().top + "px"
		guideDiv.style.left = dom.getBoundingClientRect().left + "px"
		body.appendChild(guideDiv)
		// 遮罩层
		maskDiv = document.createElement("div")
		maskDiv.className = "guideMask"
		body.appendChild(maskDiv)
		// 提示框父级
		tooltipDiv = document.createElement("div")
		tooltipDiv.className = "tooltipBox"
		tooltipDiv.style.width = dom.offsetWidth + "px"
		tooltipDiv.style.height = dom.offsetHeight + "px"
		tooltipDiv.style.top = dom.getBoundingClientRect().top + "px"
		tooltipDiv.style.left = dom.getBoundingClientRect().left + "px"
		body.appendChild(tooltipDiv)
		// 提示框
		tooltipDiv.innerHTML = "<div class='tooltipContent'>"
			+"<div class='arrowBox'></div>"
			+"<div class='tooltipHeader'><span id='tooltipClose'>x</span></div>"
			+"<div class='tooltipText'>"+options.steps[count].text+"</div>"
			+"<div class='tooltipFooter'><span id='tooltipPrev'>上一步</span><span id='tooltipNext'>下一步</span></div>"
		+"</div>"
		tooltipContent = document.querySelector(".tooltipContent")
		tooltipContent.style.display = "block"
		// 小箭头
		arrowBox = document.querySelector(".arrowBox")
		arrowBox.className = "arrowBox arrow-" + options.steps[count].position
		// 提示框和小箭头的方向位置
		_this.direction()
		// 上一步
		prev = document.getElementById("tooltipPrev")
		if(count == 0){
			prev.style.display = "none"
		}
		prev.onclick = function(){
			if(count >= 1){
				if(options.steps[count].trigger?.element){
					document.querySelector(options.steps[count].trigger.element).click()
					if(options.steps[count].trigger?.maskName){
						document.querySelector(options.steps[count].trigger.maskName).click()
					}
				}
				count --
				
				_this.stepJump()
			}
		}
		// 下一步
		next = document.getElementById("tooltipNext")
		next.onclick = function(){
			if(options.steps.length && count < options.steps.length - 1){
				count ++
				let time = options.steps[count].trigger?.maskWaitTime || 0
				if(options.steps[count].trigger?.element){
					document.querySelector(options.steps[count].trigger.element).click()
				}
				setTimeout(() => {
					_this.stepJump()
				},time)
			}else{
				guideDiv.remove()
				maskDiv.remove()
				tooltipDiv.remove()
			}
		}
		// 关闭
		tooltipClose = document.getElementById("tooltipClose")
		tooltipClose.onclick = function(){
			guideDiv.remove()
			maskDiv.remove()
			tooltipDiv.remove()
		}
	}
	// 提示框和小箭头的方向位置
	direction(){
		arrowBox.className = "arrowBox arrow-" + options.steps[count].position
		arrowBox.removeAttribute("style")
		tooltipContent.removeAttribute("style")
		tooltipContent.style.display = "block"
		if(options.steps[count].position == "top"){
			arrowBox.style.bottom = "-5px"
			tooltipContent.style.bottom = dom.offsetHeight + 10 + "px"
			tooltipContent.style.left = "5px"
		}else if(options.steps[count].position == "left"){
			arrowBox.style.right = "-5px"
			tooltipContent.style.right = dom.offsetWidth + 10 + "px"
			tooltipContent.style.top = "5px"
		}else if(options.steps[count].position == "right"){
			arrowBox.style.top = "5px"
			tooltipContent.style.left = dom.offsetWidth + 10 + "px"
			tooltipContent.style.top = "5px"
		}else{
			arrowBox.style.left = "10px"
			tooltipContent.style.left = "5px"
			tooltipContent.style.top = dom.offsetHeight + 10 + "px"
		}
	}
	
	stepJump(){
		dom = document.querySelector(options.steps[count].element)
		// 跳转到指定位置
		// let topHeight = tooltipContent.getBoundingClientRect().top + tooltipContent.offsetHeight
		// let bottomHeight = tooltipContent.getBoundingClientRect().top + tooltipContent.offsetHeight
		// if(topHeight >= document.body.offsetHeight || bottomHeight >= document.body.offsetHeight){
		// 	dom.scrollIntoView(true)
		// }
		dom.scrollIntoView(true)
		guideDiv.style.width = dom.offsetWidth + "px"
		guideDiv.style.height = dom.offsetHeight + "px"
		guideDiv.style.top = dom.getBoundingClientRect().top + "px"
		guideDiv.style.left = dom.getBoundingClientRect().left + "px"
		
		tooltipDiv.style.width = dom.offsetWidth + "px"
		tooltipDiv.style.height = dom.offsetHeight + "px"
		tooltipDiv.style.top = dom.getBoundingClientRect().top + "px"
		tooltipDiv.style.left = dom.getBoundingClientRect().left + "px"
		
		// 修改提示文字
		tooltipText = document.getElementsByClassName("tooltipText")[0]
		tooltipText.innerText = options.steps[count].text
		
		if(count == 0){
			prev.style.display = "none"
		}else{
			prev.style.display = ""
			prev.innerText = "上一步"
		}
		if(options.steps.length && count >= options.steps.length - 1){
			next.innerText = "结束"
		}else{
			next.innerText = "下一步"
		}
		// 提示框和小箭头的方向位置
		this.direction()
		
		// if((dom.getBoundingClientRect().left + tooltipContent.offsetWidth + 5) >= document.body.offsetWidth){
		// 	tooltipContent.style.left = ""
		// 	tooltipContent.style.right = "5px"
		// 	arrowBox.style.left = ""
		// 	arrowBox.style.right = "10px"
		// }else{
		// 	tooltipContent.style.left = "5px"
		// 	tooltipContent.style.right = ""
		// 	arrowBox.style.left = "10px"
		// 	arrowBox.style.right = ""
		// }
		// tooltipContent.style.top = dom.offsetHeight + 10 + "px"
	}
	
	
}

export default new animatedSteering()